<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
@import "rewrite/imported.css";
@font-face { font-family: fontface; src: url(rewrite/sansation_light.woff); }
#background { background: url(rewrite/green.bmp); }
</style>
<style>
@media print {
  #media { color: green; }
}
</style>
<style>
@keyframes demo {
  from { transform: translateX(-5px); }
  to { transform: translateX(40px); }
}
#keyframes { animation: demo 3s linear infinite; }
</style>
<style>
@supports (--myvar: green) {
  :root {
    --myvar: green;
  }
  #supports {
    color: var(--myvar);
  }
}
</style>
<style>
@namespace svg url(http://www.w3.org/2000/svg);
svg|a text, text svg|a {
  fill: blue;
  text-decoration: underline;
}
</style>
<style>
/* unsupported rules */
#unsupported {
  *background: url(rewrite/unsupported-1.bmp); /* IE7 */
  _background: url(rewrite/unsupported-2.bmp); /* IE6 */
  -o-background: url(rewrite/unsupported-3.bmp); /* vandor prefix */
  unknown: url(rewrite/unsupported-4.bmp); /* unknown */
}
</style>
</head>
<body>
<h2>Basic rewrite</h2>
<blockquote style="background: blue; background: url(rewrite/green.bmp);">inline background</blockquote>
<blockquote id="background">background</blockquote>
<blockquote style="font-family: fontface;">@font-face</blockquote>
<blockquote id="imported">@import</blockquote>
<blockquote id="media">@media print</blockquote>
<blockquote id="keyframes">@keyframes</blockquote>
<blockquote id="supports">@supports</blockquote>
<blockquote id="namespace">@namespace
<svg width="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <a href="rewrite/green.bmp">
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
  </a>
</svg>
</blockquote>

<h2>Unsupported rules</h2>
<blockquote id="unsupported">unsupported</blockquote>
</body>
</html>
